<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.69.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Vue &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/hugoblog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/hugoblog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/hugoblog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/hugoblog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0self ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/hugoblog/"><h1>我的博客</h1></a>
      <p class="lead">
       这里是骆建宇的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/hugoblog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>Vue</h1>
  <time datetime=2020-04-22T10:56:08&#43;0800 class="post-date">Wed, Apr 22, 2020</time>
  <h1 id="vue基础命令">vue基础命令</h1>
<h2 id="定义网页的骨架">定义网页的骨架</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
    
    &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">style</span> <span style="color:#a6e22e">scoped</span>&gt;
.<span style="color:#a6e22e">on</span> {<span style="color:#a6e22e">background</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">rebeccapurple</span>;<span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">white</span>}
.<span style="color:#a6e22e">off</span> {<span style="color:#a6e22e">background</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">red</span>;<span style="color:#a6e22e">color</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">black</span>}
<span style="color:#a6e22e">background</span> <span style="color:#a6e22e">背景颜色</span>
<span style="color:#a6e22e">color</span> <span style="color:#a6e22e">字体颜色</span>
&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div><h2 id="定义网页样式">定义网页样式</h2>
<h2 id="定义网页的行为">定义网页的行为</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">scrapy</span>&gt;
    <span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
      <span style="color:#75715e">//定义数据
</span><span style="color:#75715e"></span>      <span style="color:#a6e22e">data</span>(){
          <span style="color:#66d9ef">return</span>{
            <span style="color:#a6e22e">msg</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&lt;h1&gt;这是一个变量&lt;/h1&gt;&#39;</span>,

          }
      },
      
    <span style="color:#75715e">//钩子方法          
</span><span style="color:#75715e"></span>      <span style="color:#a6e22e">mounted</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span> () {

      },
      
      <span style="color:#75715e">//计算属性
</span><span style="color:#75715e"></span>      <span style="color:#a6e22e">computed</span><span style="color:#f92672">:</span>{

      },
      
    <span style="color:#75715e">//监听属性
</span><span style="color:#75715e"></span>      <span style="color:#a6e22e">watch</span><span style="color:#f92672">:</span>{
          <span style="color:#a6e22e">counter</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">nval</span>,<span style="color:#a6e22e">oval</span>) {

            <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;计数器由&#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">oval</span><span style="color:#f92672">+</span><span style="color:#e6db74">&#39;变换为新的&#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">nval</span>)
          }
      },
      
    <span style="color:#75715e">//自定义方法
</span><span style="color:#75715e"></span>      <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{

          },
        
&lt;/<span style="color:#f92672">scrapy</span>&gt;
</code></pre></div><h3 id="语法">语法</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">div</span> <span style="color:#f92672">v-html</span><span style="color:#e6db74">=&#34;msg&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
<span style="color:#a6e22e">以html语法展示</span>
{{ <span style="color:#a6e22e">msg</span> }}
<span style="color:#a6e22e">普通战展示</span>

&lt;<span style="color:#f92672">div</span> <span style="color:#f92672">v-show</span><span style="color:#e6db74">=&#34;&#34;&gt;&lt;/div&gt;
</span><span style="color:#e6db74">简单的判断,展示出正确的数据,错误的不展示
</span><span style="color:#e6db74">
</span><span style="color:#e6db74">&lt;div v-if=&#34;type === &#39;A&#39;&#34;&gt;A&lt;/div&gt;
</span><span style="color:#e6db74">&lt;div v-else-if=&#34;type === &#39;B&#39;&#34;&gt;B&lt;/div&gt;
</span><span style="color:#e6db74">&lt;div v-else&gt;
</span><span style="color:#e6db74">也是判断,比v-show多一点功能
</span><span style="color:#e6db74">
</span><span style="color:#e6db74">&lt;ul&gt;
</span><span style="color:#e6db74">  &lt;li v-for=&#34;(item,index) in tlist&#34; :class=&#34;{on:index%2==0,off:index%2!=0}&#34;&gt;
</span><span style="color:#e6db74">    {{item.text}}
</span><span style="color:#e6db74">  &lt;/li&gt;
</span><span style="color:#e6db74">&lt;/ul&gt;
</span><span style="color:#e6db74">判断单双行的颜色
</span><span style="color:#e6db74">
</span><span style="color:#e6db74">&lt;button @click=&#34;counter++&#34;</span>&gt;<span style="color:#a6e22e">点我就加一</span>&lt;/<span style="color:#f92672">button</span>&gt;
<span style="color:#a6e22e">点击事件</span><span style="color:#960050;background-color:#1e0010">,</span><span style="color:#a6e22e">点击加一</span>

<span style="color:#f92672">:class</span><span style="color:#e6db74">=&#34;{on:index%2==0,off:index%2!=0}&#34;</span>
<span style="color:#a6e22e">绑定事件</span>

<span style="color:#a6e22e">v</span><span style="color:#f92672">-for</span>
<span style="color:#a6e22e">列表渲染</span>

<span style="color:#a6e22e">v</span><span style="color:#f92672">-model</span>
<span style="color:#a6e22e">表单数据双向绑定</span>


</code></pre></div>
</div>


    </main>

    
  </body>
</html>
